<template>
	<view class="page">
		<view class="register-form">
		<view class="form-item">
			 <span>旧 密 码：</span>
			 <input type="text" placeholder="请输入旧密码" maxlength="11" v-model="oldPwd">
		</view>
		<view class="form-item">
			<span>新 密 码：</span>
			<input type="text" placeholder="请输入新密码" maxlength="11" v-model="newPwd">
		</view>
		<view class="form-item">
			<span>确认密码：</span>
			<input type="text" placeholder="请输入新密码" maxlength="11" v-model="confirmPassword">
		</view>
		</view>
		<view class="register-btn" @click="confirm">
			确定
		</view>
	</view>
</template>

<script >
	import {updatedPassword} from "../../api/index.js"
	export default {
		data() {
			return {
				oldPwd:"",
				newPwd:"",
				confirmPassword:""
			}
		},
		methods: {
			confirm(){
				if( !this.oldPwd.trim() || !this.newPwd.trim() || !this.confirmPassword.trim() ) {
					uni.showToast({
						icon:'error',
						title:"输入不能为空"
					})
					return;
				}
				if(this.newPwd === this.confirmPassword) {
					// 组合数据把旧密码和新密码发送给后端
					let obj = {
						oldPwd:this.oldPwd,
						newPwd:this.newPwd,
					}
					// 调用接口发送obj
					updatedPassword(obj).then(res=>{
						if(res.data.status === 0){
							uni.showToast({
								title:"修改成功"
							})
							// 清空本地存储的token 和 userInfo
							uni.removeStorageSync("token")
							uni.removeStorageSync("userInfo")
							setTimeout(()=>{
								// 修改成功 跳转到login页面
								uni.reLaunch({
									url:"/pages/login/login"
								})
							},600)
						} else {
							uni.showToast({
								title:"修改失败"
							})
						}
					})
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
.page{
		background-color: #F5F5F5;
		// background-color: red;
		width:100%;
		height:100vh;
	}
	
	.register-form{
		padding: 10px;
		.form-item{
			margin-bottom: 10px;
			display: flex;
			width: 95%;
			height:60rpx;
			// margin-top:10px;
			background-color:white;
			border-radius: 10px;
			padding:8px;
		}
		.form-item span{
			// height:100px;
			padding-top: 3px;
			// background-color: red;
		    display: flex;
		   
		}
		.form-item input{
			// margin: 5px 0 5px 0;
			// align-items: center;
			// background-color: red;
			display: flex;
			padding-top: 3px;
			// margin-top: 5rpx;
		}
	}
	.register-btn{
		width:80%;
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #FF88C2;
		margin:230px auto 0;
		border-radius: 30rpx;
	}
	

</style>
